<template>
  <view class="container">
    <!-- 顶部卡片 -->
    <view class="fee-card">
      <view class="card-header">
        <text class="card-title">当前应缴费用</text>
        <text class="card-amount">¥{{ currentFee.toFixed(2) }}</text>
      </view>
      <view class="card-info">
        <view class="info-item">
          <text class="info-label">缴费周期：</text>
          <text class="info-value">{{ currentPeriod }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">截止日期：</text>
          <text class="info-value">{{ dueDate }}</text>
        </view>
      </view>
      <button class="pay-btn" @tap="handlePayment">立即缴费</button>
    </view>

    <!-- 费用明细 -->
    <view class="fee-details">
      <view class="section-header">
        <text class="section-title">费用明细</text>
      </view>
      <view class="details-list">
        <view class="detail-item" v-for="(item, index) in feeDetails" :key="index">
          <text class="detail-name">{{ item.name }}</text>
          <text class="detail-amount">¥{{ item.amount.toFixed(2) }}</text>
        </view>
        <view class="detail-item total">
          <text class="detail-name">合计</text>
          <text class="detail-amount">¥{{ currentFee.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费记录 -->
    <view class="payment-history">
      <view class="section-header">
        <text class="section-title">缴费记录</text>
      </view>
      <view class="history-list">
        <view class="empty-tip" v-if="paymentHistory.length === 0">
          <image src="/static/icons/empty.png" mode="aspectFit"></image>
          <text>暂无缴费记录</text>
        </view>
        <view class="history-item" v-for="(item, index) in paymentHistory" :key="index" @tap="showHistoryDetail(item)">
          <view class="history-left">
            <text class="history-title">{{ item.title }}</text>
            <text class="history-date">{{ item.date }}</text>
          </view>
          <view class="history-right">
            <text class="history-amount">¥{{ item.amount.toFixed(2) }}</text>
            <text class="history-status" :class="item.status === '已支付' ? 'paid' : 'unpaid'">{{ item.status }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 缴费说明 -->
    <view class="payment-notice">
      <view class="section-header">
        <text class="section-title">缴费说明</text>
      </view>
      <view class="notice-content">
        <view class="notice-item">
          <text class="dot"></text>
          <text class="notice-text">物业费按季度收取，每平方米3元/月</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="notice-text">维修基金按房屋总价的2%一次性收取</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="notice-text">提前缴纳全年物业费可享受95折优惠</text>
        </view>
        <view class="notice-item">
          <text class="dot"></text>
          <text class="notice-text">逾期缴纳将产生滞纳金，按日计算0.05%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentFee: 1256.50,
      currentPeriod: '2025年03月-06月',
      houseInfo: '',
      dueDate: '2025-06-30',
      feeDetails: [
        { name: '物业管理费', amount: 960.00 },
        { name: '垃圾处理费', amount: 90.00 },
        { name: '公共设施维护费', amount: 156.50 },
        { name: '电梯维护费', amount: 50.00 }
      ],
      paymentHistory: [
        { 
          id: 1,
          title: '2025年第一季度物业费', 
          date: '2025-03-15', 
          amount: 1256.50, 
          status: '已支付',
          details: [
            { name: '物业管理费', amount: 960.00 },
            { name: '垃圾处理费', amount: 90.00 },
            { name: '公共设施维护费', amount: 156.50 },
            { name: '电梯维护费', amount: 50.00 }
          ],
          payMethod: '微信支付',
          transactionId: '2024041512345678'
        },
        { 
          id: 2,
          title: '2024年第四季度物业费', 
          date: '2024-10-10', 
          amount: 1256.50, 
          status: '已支付',
          details: [
            { name: '物业管理费', amount: 960.00 },
            { name: '垃圾处理费', amount: 90.00 },
            { name: '公共设施维护费', amount: 156.50 },
            { name: '电梯维护费', amount: 50.00 }
          ],
          payMethod: '支付宝',
          transactionId: '2025031087654321'
        },
        { 
          id: 3,
          title: '2024年第三季度物业费', 
          date: '2024-07-10', 
          amount: 1256.50, 
          status: '已支付',
          details: [
            { name: '物业管理费', amount: 960.00 },
            { name: '垃圾处理费', amount: 90.00 },
            { name: '公共设施维护费', amount: 156.50 },
            { name: '电梯维护费', amount: 50.00 }
          ],
          payMethod: '银行卡',
          transactionId: '2025031012345678'
        }
      ]
    }
  },
  methods: {
    handlePayment() {
      uni.showModal({
        title: '确认支付',
        content: `您将支付${this.currentFee.toFixed(2)}元房屋费用`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '支付中...'
            })
            
            // 模拟支付过程
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '支付成功',
                icon: 'success'
              })
              
              // 更新缴费记录
              const newPayment = {
                id: this.paymentHistory.length + 1,
                title: this.currentPeriod + '物业费',
                date: new Date().toISOString().split('T')[0],
                amount: this.currentFee,
                status: '已支付',
                details: [...this.feeDetails],
                payMethod: '微信支付',
                transactionId: new Date().getTime().toString()
              }
              
              this.paymentHistory.unshift(newPayment)
              
              // 实际项目中这里应该调用API更新后端数据
            }, 2000)
          }
        }
      })
    },
    showHistoryDetail(item) {
      // 将对象转为字符串传递
      const itemStr = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: `/pages/property/payment-detail?item=${itemStr}`
      })
    },
    async getPaymentData() {
      try {
        // 实际项目中这里会从API获取数据
        // const res = await this.$api.getPropertyFeeData()
        // this.currentFee = res.data.currentFee
        // this.currentPeriod = res.data.currentPeriod
        // this.houseInfo = res.data.houseInfo
        // this.dueDate = res.data.dueDate
        // this.feeDetails = res.data.feeDetails
        // this.paymentHistory = res.data.paymentHistory
        
        // 这里使用的是本地数据，实际开发时可替换为API调用
        console.log('获取房屋费数据成功')
      } catch (error) {
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      }
    }
  },
  onLoad() {
    this.getPaymentData()
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f8f9fc;
  min-height: 100vh;
}

.fee-card {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    right: -100rpx;
    bottom: -100rpx;
    width: 400rpx;
    height: 400rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
  }
  
  .card-header {
    position: relative;
    z-index: 2;
    margin-bottom: 30rpx;
    
    .card-title {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      display: block;
      margin-bottom: 10rpx;
    }
    
    .card-amount {
      font-size: 60rpx;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
    }
  }
  
  .card-info {
    position: relative;
    z-index: 2;
    margin-bottom: 30rpx;
    
    .info-item {
      display: flex;
      margin-bottom: 10rpx;
      
      .info-label {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.8);
        width: 150rpx;
      }
      
      .info-value {
        font-size: 24rpx;
        color: #fff;
        flex: 1;
      }
    }
  }
  
  .pay-btn {
    position: relative;
    z-index: 2;
    background-color: #fff;
    color: #6a11cb;
    font-size: 28rpx;
    font-weight: bold;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background: #6a11cb;
      border-radius: 3rpx;
    }
  }
}

.fee-details, .payment-history, .payment-notice {
  background: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.details-list {
  .detail-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.total {
      padding-top: 30rpx;
      
      .detail-name, .detail-amount {
        font-weight: bold;
        color: #333;
      }
    }
    
    .detail-name {
      font-size: 28rpx;
      color: #666;
    }
    
    .detail-amount {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.history-list {
  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 0;
    
    image {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
      opacity: 0.5;
    }
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
  
  .history-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f9f9f9;
    }
    
    .history-left {
      display: flex;
      flex-direction: column;
      
      .history-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .history-date {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .history-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      
      .history-amount {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .history-status {
        font-size: 24rpx;
        
        &.paid {
          color: #34c759;
        }
        
        &.unpaid {
          color: #ff3b30;
        }
      }
    }
  }
}

.notice-content {
  padding: 10rpx 0;
  
  .notice-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
    
    .dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: #6a11cb;
      margin-top: 12rpx;
      margin-right: 16rpx;
      flex-shrink: 0;
    }
    
    .notice-text {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      flex: 1;
    }
  }
}
</style>